<template>
<div>
    <h2>个人中心页面</h2>
    <router-link to="/city">城市页面</router-link>
    <p>用户名:{{ username }}</p>
    <p>年龄:{{ age }}</p>
    <button @click="addAge(2)">age+</button>
    <div>{{ info }}</div>
</div>
</template>

<script>

import {mapState,mapMutations,mapGetters} from 'vuex'
export default {
    computed:{
        ...mapGetters(['info']),
        ...mapState(['username' , 'age'])
        // username() {
        //     return this.$store.state.username
        // },
        // age() {
        //     return this.$store.state.age
        // }
    },
    created() {
        // console.log('store实例对象',this.$store)
        console.log('store数据',this.$store.state)

    },
    methods:{
        ...mapMutations(['addAge'])
        // addAge(params) {
        //   this.$store.commit('addAge', params)
        // },

        // addAge() {
        //     // 调用store中 mutations 的函数
        //     this.$store.commit('addAge',1)
        // }
    }
}
</script>

<style>

</style>